<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="true" title="商品详情" :border-bottom="false" :title-bold="true"></u-navbar>
		</view>
		<u-swiper :list="bannerList" height="750" mode="number" border-radius="0" indicator-pos="bottomRight">
		</u-swiper>
		<view class="contentView">
			<view class="goodsTitle">{{goodsInfo.name}}</view>
			<view class="headerView">
				<view class="goodsPrice">¥{{goodsInfo.min_price||goodsInfo.price}}</view>
				<view class="goodsSale">已售{{goodsInfo.sale_count}}</view>
			</view>
		</view>
		<u-gap height="20" bg-color="#f5f5f5"></u-gap>
		<view class="contentView">
			<view class="headerView" @click="onComment()">
				<view class="headerTitle">用户评价</view>
				<view class="headerText">{{commentList.length}}条好评</view>
				<u-icon name="arrow-right" size="20" color="#666"></u-icon>
			</view>
			<view class="commentView" v-for="(item,index) in commentList" :key="index">
				<view class="commentUser">
					<u-avatar :src="item.user.avatar_format" size="70"></u-avatar>
					<view class="userInfo">
						<view class="username">
							<text>{{item.user.nickname}}</text>
							<span v-if="item.goods_star==1">特别差</span>
							<span v-if="item.goods_star==2">差</span>
							<span v-if="item.goods_star==3">一般</span>
							<span v-if="item.goods_star==4">好</span>
							<span v-if="item.goods_star==5">非常好</span>
						</view>
						<view class="commentTime">
							<text>{{item.created_at}}</text>
							<u-rate :count="5" v-model="item.goods_star" disabled :size="10"
								active-color="#FFAC0E"></u-rate>
						</view>
					</view>
				</view>
				<view class="commentText">{{item.content}}</view>
				<view class="commentImage" v-if="item.images_format" v-for="(c,i) in item.images_format" :key="i">
					<image class="imageIcon" :src="c" mode="aspectFill"></image>

				</view>
				<view class="commentReplay flc">
					<view class="name">
						商家回复
					</view>
					<span>感谢你的支持，加油赞，我们会继续努力</span>
				</view>
			</view>
		</view>
		<view class="detailsView">
			<view class="goodsDetail">商品详情</view>

			<mp-html :content="goodsInfo.detail"></mp-html>
		</view>
		<u-gap height="100"></u-gap>
		<view class="bottomView">
			<view class="btnView" @click="goStore()">
				<u-icon name="/static/icons/dp.png" size="36"></u-icon>
				<view>店铺</view>
			</view>
			<view class="btnView" @click="onCartList()">
				<u-icon name="/static/icons/gwc2.png" size="36"></u-icon>
				<view>购物车</view>
			</view>
			<view style="flex: 1;"></view>
			<view class="buyBtn bg2" @click="openAddcart()">加入购物车</view>
			<view class="buyBtn bg" @click="openBuy()">立即购买</view>
		</view>

		<vk-data-goods-sku-popup ref="skuPopup" v-model="skuKey" border-radius="20" :localdata="skus" :mode="skuMode"
			@open="onOpenSkuPopup" @close="onCloseSkuPopup" @add-cart="addCart" :buyNowText="title"
			@buy-now="buyNow"></vk-data-goods-sku-popup>
		<u-popup mode="bottom" v-model="show" border-radius="20" :closeable="true" height="550">
			<view class="content" style="box-sizing: border-box;padding: 40rpx 20rpx 0 20rpx;" v-if="goodsInfo">
				<scroll-view scroll-y="true" style="height: 400rpx;">
					<view class="goodsPop">
						<view class="top flc">
							<view class="img" v-if="goodsInfo.images_format">
								<image :src="goodsInfo.images_format[0]" mode="widthFix"
									style="width: 200rpx; border-radius: 15rpx;"></image>
							</view>
							<view class="info ml2">
								<view class="name">
									{{goodsInfo.name}}
								</view>
								<view class="price">
									￥{{goodsInfo.min_price||goodsInfo.price}}
								</view>
								<view class="stock">
									库存:{{goodsInfo.stock}}
								</view>
							</view>
						</view>
						<view class="num jsbc">
							<view class="num">
								数量
							</view>
							<view class="">
								<u-number-box v-model="number" @change="valChange"
									:max="goodsInfo.stock"></u-number-box>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="confrim-btn">
					<u-button @click="operate" type="error">{{title}}</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		closeload,
		toastload,
		toastC,
		toast,
		tiao
	} from '../../utils/common';
	import {
		getGoodsDetail,
		getComment,
		collectBtn,
		cancelCollect,
		addCartBtn
	} from '@/api/index.js'
	var that; // 当前页面对象
	import {
		useCartStore
	} from '../../stores/index.js';
	export default {
		data() {
			return {
				// 是否打开SKU弹窗
				skuKey: false,
				// SKU弹窗模式
				skuMode: 1,
				// 后端返回的商品信息
				goodsInfo: {},
				skus: {},
				bannerList: [],
				commentList: [],
				flag: false,
				options: "",
				show: false,
				title: "立即购买",
				number: 1,
				// 多规格信息，
				skusInfo: {},
				cartInfo: useCartStore(),
				type: ""
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options) {
			that = this;
			console.log(options);
			that.init(options);
			this.options = options
		},
		methods: {
			init(options = {}) {
				toastload()
				getGoodsDetail(options.id).then(res => {
					closeload()
					console.log(res);
					this.goodsInfo = res.data
					this.bannerList = res.data.images_format
				})
				getComment(options.id).then(res => {
					console.log("评论", res);
					this.commentList = res.list
					if (res.list.length > 2) {
						this.commentList = this.commentList.slice(0, 2)
					}
				})
			},
			onComment() {
				uni.navigateTo({
					url: '/page/moreCommit/moreCommit?id=' + this.options.id
				})
			},
			openSkuPopup() {
				that.skus = {
					"_id": this.goodsInfo.skus.id,
					"name": this.goodsInfo.skus.name,
					"goods_thumb": this.goodsInfo.skus.image,
					"sku_list": this.goodsInfo.sku_list.map(item => {
						return {
							"_id": item.id,
							"goods_id": item.goods_id,
							"goods_name": this.goodsInfo.skus.name,
							"image": item.format_image,
							"price": item.price,
							"sku_name_arr": item.goods_props.map(c => {
								return c.value.name
							}),
							"stock": item.stock
						}
					}),
					"spec_list": this.goodsInfo.specList.map(item => {
						return {
							name: item.spec_name,
							list: item.valueList.map(c => {
								return {
									name: c.spec_value,
									is_show: true
								}
							})
						}
					})
				}
				that.skuKey = true;
			},
			// sku组件 开始-----------------------------------------------------------
			onOpenSkuPopup() {
				console.log("监听 - 打开sku组件");
			},
			onCloseSkuPopup() {
				console.log("监听 - 关闭sku组件");
			},
			// 加入购物车前的判断
			addCartFn(obj) {
				let {
					selectShop
				} = obj;
				// 模拟添加到购物车,请替换成你自己的添加到购物车逻辑
				let res = {};
				let name = selectShop.goods_name;
				if (selectShop.sku_name != "默认") {
					name += "-" + selectShop.sku_name_arr;
				}
				res.msg = `${name} 已添加到购物车`;
				if (typeof obj.success == "function") obj.success(res);
			},
			// 加入购物车按钮
			addCart(selectShop) {
				console.log("监听 - 加入购物车");
				that.addCartFn({
					selectShop: selectShop,
					success: function(res) {
						// 实际业务时,请替换自己的加入购物车逻辑
						toast(res.msg);
						console.log(selectShop);
						addCartBtn({
							goods_id: that.goodsInfo.id,
							goods_number: selectShop.buy_num,
							goods_sku_id: selectShop._id
						}).then(res => {
							if (res.code == 200) {
								toastC("加入成功")
								that.skuKey = false
							}
						})
					}
				});
			},
			valChange(e) {
				this.number = e.value
			},
			// 立即购买
			buyNow(selectShop) {
				console.log("监听 - 立即购买", selectShop);
				that.addCartFn({
					selectShop: selectShop,
					success: function(res) {
						// 实际业务时,请替换自己的立即购买逻辑
						that.cartInfo.addOrder({
							...that.goodsInfo,
							num: selectShop.buy_num,
							skusInfo: selectShop
						})
						uni.navigateTo({
							url: '/page/orderConfirm/orderConfirm?type=1'
						})
					}
				});
			},
			openAddcart() {
				if (this.goodsInfo.specList.length > 0) {
					this.skuMode = 2
					this.openSkuPopup()
				} else {
					this.type = 1
					this.show = true
					this.title = '加入购物车'
				}
			},
			openBuy() {
				if (this.goodsInfo.specList.length > 0) {
					this.skuMode = 3
					this.openSkuPopup()
				} else {
					this.type = 2
					this.show = true
					this.title = '立即购买'
				}
			},

			collect() {
				if (this.goodsInfo.is_collect == 0) {
					collectBtn({
						goods_id: this.goodsInfo.id
					}).then(res => {
						if (res.code == 200) {
							toastC("收藏成功")
							setTimeout(() => {
								this.init(this.options)
							}, 300)
						}
					})
				} else {
					cancelCollect({
						goods_id: this.goodsInfo.id
					}).then(res => {
						if (res.code == 200) {
							toast("取消收藏")
							setTimeout(() => {
								this.init(this.options)
							}, 300)
						}
					})
				}
			},
			operate() {
				console.log("操作",this.type);
				if (this.type == 2) {
					this.cartInfo.addOrder({
						...this.goodsInfo,
						num: this.number
					})
					this.show = false
					uni.navigateTo({
						url: '/page/orderConfirm/orderConfirm?type=1'
					})
				} else {
					addCartBtn({
						goods_id: this.goodsInfo.id,
						goods_number: this.number
					}).then(res => {
						if (res.code == 200) {
							toastC("加入成功")
							this.show = false
						}
					})
				}
			},
			onCartList() {
				uni.switchTab({
					url: '/pages/goods-cart/goods-cart'
				})
			},
			goStore() {
				uni.navigateTo({
					url: '/page/store/store?id='+this.goodsInfo.store.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contentView {
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		padding: 0 20rpx;
	}

	.goodsTitle {
		padding: 25rpx 0;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}

	.saleCount {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.saleCount text {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		margin-right: 30rpx;
	}

	.goodsPrice {
		font-weight: bold;
		font-size: 32rpx;
		color: #FA453C;
	}

	.goodsSale {
		color: #dedede;
		font-size: 26rpx;
	}

	.storeView {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #FFFFFF;
		padding: 25rpx 20rpx;
	}

	.storeName {
		flex: 1;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		margin-left: 10rpx;
	}

	.headerView {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
	}

	.headerTitle {
		flex: 1;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}

	.headerText {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.commentView {
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		padding: 20rpx 0px;
	}

	.commentUser {
		display: flex;
		flex-direction: row;
	}

	.userInfo {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 10rpx;
	}

	.username {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
	}

	.commentTime {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-weight: 400;
		font-size: 20rpx;
		color: #999;
	}

	.commentText {
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		margin-top: 20rpx;
	}

	.commentImage {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.imageIcon {
		width: 216rpx;
		height: 145rpx;
		margin-right: 20rpx;
	}

	.detailsView {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #FFFFFF;
		margin-top: 20rpx;
	}

	.goodsDetail {
		font-size: 26rpx;
		font-weight: 400;
		color: #333;
		padding: 20rpx 0px;
	}

	.bottomView {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0px -1px 10rpx 0px rgba(153, 153, 153, 0.1);
		position: fixed;
		bottom: 0px;
	}

	.btnView {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 70rpx;
		justify-content: space-between;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		padding: 0px;
		width: 130rpx;
	}

	.buyBtn {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 35rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-right: 20rpx;
		width: 200rpx;
	}

	.typeBtn {
		width: 130rpx;
		background-color: rgba(0, 0, 0, 0);
		font-size: 26rpx;
		padding: 0;
		color: #333;
		margin: 0;
		color: #333;
		margin-top: 11rpx;

		&::after {
			border: none;
		}

		.items {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			padding: 0px 20rpx;
		}

		.items .icons {
			width: 36rpx;
			height: 36rpx;
		}

		.items .name {
			margin-top: -10rpx;
		}
	}

	.goodsPop {
		.price {
			font-weight: bold;
			font-size: 32rpx;
			color: #FA453C;
		}

		.name {
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			width: 500rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		.stock {
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
		}
	}

	.commentReplay {
		padding: 18rpx 0;
		border-top: 1rpx solid #dedede;
		color: #999999;
		font-size: 26rpx;

		.name {
			font-size: 28rpx;
			color: #333333;
		}
	}
</style>